{% extends 'myhome/index.html'%}

{% block tit %}
<title>地址管理</title>
{% endblock %}

{% block css %}
<link href="/static/myhome/css/personal.css" rel="stylesheet" type="text/css">
<link href="/static/myhome/css/addstyle.css" rel="stylesheet" type="text/css">

{% endblock %}

        

{% block js %}
<!-- 
<script src="/static/myhome/js/jquery.min.js" type="text/javascript"></script>
<script src="/static/myhome/js/amazeui.js" type="text/javascript"></script> -->
{% endblock %}

{% block con %}
    <div class="nav-table">
    <div class="long-title">
        <span class="all-goods">全部分类</span></div>
    <div class="nav-cont">
        <ul>
            <li class="index">
                <a href="#">首页</a></li>
            <li class="qc">
                <a href="#">闪购</a></li>
            <li class="qc">
                <a href="#">限时抢</a></li>
            <li class="qc">
                <a href="#">团购</a></li>
            <li class="qc last">
                <a href="#">大包装</a></li>
        </ul>
        <div class="nav-extra">
            <i class="am-icon-user-secret am-icon-md nav-user"></i>
            <b>
            </b>我的福利
            <i class="am-icon-angle-right" style="padding-left: 10px;"></i></div>
    </div>
</div>
<b class="line"></b>
<div class="center">
    <div class="col-main">
        <div class="main-wrap">
            <div class="user-address">
                <!--标题 -->
                <div class="am-cf am-padding">
                    <div class="am-fl am-cf">
                        <strong class="am-text-danger am-text-lg">地址管理</strong>/
                        <small>Address&nbsp;list</small></div>
                </div>
                <hr/>
                <ul class="am-avg-sm-1 am-avg-md-3 am-thumbnails">

                    {% for i in data %}

                    <li class="user-addresslist {% if i.isChecked == 1 %} defaultAddr {% endif %}">
                        {% if i.isChecked == 1 %}
                        <span class="new-option-r">
                            <i class="am-icon-check-circle"></i>默认地址</span>
                        {% elif i.isChecked == 0 %}
                        <span class="new-option-r">
                            <a href="{% url 'myhome_myinfo_editaddress' %}?aid={{ i.id }}"><i class="am-icon-check-circle"></i>设为默认</span></a>
                        {% endif %}
                        <p class="new-tit new-p-re">
                            <span class="new-txt">{{ i.shr }}</span>
                            <span class="new-txt-rd2">{{ i.shdh }}</span></p>
                        <div class="new-mu_l2a new-p-re">
                            <p class="new-mu_l2cw">
                                <span class="title">地址：</span>
                                <span class="province">{{ i.sheng }}</span>
                                <span class="city">{{ i.shi }}</span>
                                <span class="dist">{{ i.xian }}</span>
                                <span class="street">{{ i.info }}</span></p>
                        </div>
                        <div class="new-addr-btn">
                            <a href="{% url 'myhome_myinfo_addressedit' %}?uid={{ i.id }}">
                                <i class="am-icon-edit"></i>编辑</a>
                            <span class="new-addr-bar">|</span>
                            <a href="{% url 'myhome_myinfo_deladdress' %}?uid={{ i.id }}" >
                                <i class="am-icon-trash"></i>删除</a>
                        </div>
                    </li>

                    {% endfor %}
                   
                </ul>
                <div class="clear"></div>
                <a class="new-abtn-type" data-am-modal="{target: '#doc-modal-1', closeViaDimmer: 0}">添加新地址</a>
                <!--例子-->
                <div class="am-modal am-modal-no-btn" id="doc-modal-1">
                    <div class="add-dress">
                        <!--标题 -->
                        <div class="am-cf am-padding">
                            <div class="am-fl am-cf">
                                <strong class="am-text-danger am-text-lg">新增地址</strong>/
                                <small>Add&nbsp;address</small></div>
                        </div>
                        <hr/>
                        <div class="am-u-md-12 am-u-lg-8" style="margin-top: 20px;">
                            <form class="am-form am-form-horizontal">
                    <div class="am-form-group">
                        <label for="user-name" class="am-form-label">
                            收货人
                        </label>
                        <div class="am-form-content">
                            <input type="text" id="user-name" placeholder="收货人">
                            <span id="name_msg"></span>
                        </div>

                    </div>
                    <div class="am-form-group">
                        <label for="user-phone" class="am-form-label">
                            手机号码
                        </label>
                        <div class="am-form-content">
                            <input id="user-phone" placeholder="手机号必填" type="email">
                            <span id="phone_msg"></span>
                        </div>
                    </div>
                    <div class="am-form-group">
                        <label for="user-phone" class="am-form-label">
                            所在地
                        </label>
                        <div class="am-form-content address">
                            <select name="sheng">
                                {% for v in citys %}
                                    <option value="{{ v.id }}">{{ v.name }}</option>
                                {% endfor %}
                            </select>

                            <select name="shi">
                                <option>--请选择--</option>
                            </select>
                            <select name="xian">
                                <option>--请选择--</option>
                            </select>
                           
                            
                        </div>
                    </div>
                    <div class="am-form-group">
                        <label for="user-intro" class="am-form-label">
                            详细地址
                        </label>
                        <div class="am-form-content">
                            <textarea class="" rows="3" id="user-intro" placeholder="输入详细地址"></textarea>
                            <small>
                                100字以内写出你的详细地址...
                            </small>
                        </div>
                    </div>
                    <div class="am-form-group theme-poptit">
                        <div class="am-u-sm-9 am-u-sm-push-3">
                            <button class="am-btn am-btn-danger" id="addressadd">
                                保存
                            </button>
                            <div class="am-btn am-btn-danger close" id="addressclose">
                                取消
                            </div>
                        </div>
                    </div>
                </form>
                        </div>
                    </div>
                </div>
            </div>
            <script type="text/javascript">$(document).ready(function() {
                    $(".new-option-r").click(function() {
                        $(this).parent('.user-addresslist').addClass("defaultAddr").siblings().removeClass("defaultAddr");
                    });

                    var $ww = $(window).width();
                    if ($ww > 640) {
                        $("#doc-modal-1").removeClass("am-modal am-modal-no-btn")
                    }

                })
            </script>
            <div class="clear"></div>
        </div>
        
    </div>
    <aside class="menu">
        <ul>
            <li class="person">
                <a href="#">个人中心</a></li>
            <li class="person">
                <a href="{% url 'myhome_myinfo_introduction' %}">个人资料</a>
                <ul>
                    <li>
                        <a href="{% url 'myhome_myinfo_introduction' %}">个人信息</a></li>
                 <!--    <li>
                        <a href="safety.html">安全设置</a></li>
                    <li class="active"> -->
                        <a href="{% url 'myhome_myinfo_address' %}">收货地址</a></li>
                </ul>
            </li>
            <li class="person">
                <a href="{% url 'myhome_myinfo_order' %}">我的交易</a>
                <ul>
                    <li>
                        <a href="{% url 'myhome_myinfo_order' %}">订单管理</a></li>
                   <!--  <li> 
                        <a href="change.html">退款售后</a></li> -->
                </ul>
            </li>
           <!--  <li class="person">
                <a href="#">我的资产</a>
                <ul>
                    <li>
                        <a href="coupon.html">优惠券</a></li>
                    <li>
                        <a href="bonus.html">红包</a></li>
                    <li>
                        <a href="bill.html">账单明细</a></li>
                </ul>
            </li> -->
            <!-- <li class="person">
                <a href="#">我的小窝</a>
                <ul>
                    <li>
                        <a href="collection.html">收藏</a></li>
                    <li>
                        <a href="foot.html">足迹</a></li>
                    <li>
                        <a href="comment.html">评价</a></li>
                    <li>
                        <a href="news.html">消息</a></li>
                </ul>
            </li> -->
        </ul>
    </aside>
</div>
<script type="text/javascript">
    // 地址添加
    $('#addressadd').click(function(){
        var adds = {}
        adds.shr = $('#user-name').val()
        adds.shdh = $('#user-phone').val()
        adds.sheng = $('select[name=sheng]').val()
        adds.shi = $('select[name=shi]').val()
        adds.xian = $('select[name=xian]').val()
        adds.info = $('#user-intro').val()

        // 发送ajax请求,存储地址
        $.get('{% url 'myhome_addressadd'%}',adds,function(data){
            alert('保存成功')
            location.href='{% url 'myhome_myinfo_address' %}'
            // 触发取消事件
            $('#addressclose').trigger('click')
        },'json')

    })
    // 获取页面中的 下拉选框 绑定change事件
    $('.address select').click(function(){
        // 获取当前选中的元素的 id
        var id = $(this).val()

        // 发送ajax请求,获取下一级的数据
        $.get('{% url "myhome_getcitys" %}',{'id':id},function(data){
            // 判断返回的数据,如果为空,
            if(data.length == 0){ return }

            // 判断级别
            if(data[0].level == 2){
                var sel = $('.address select[name=shi]')
            }else if(data[0].level == 3){
                var sel = $('.address select[name=xian]')
            }

            var ops = ''
            // 遍历获取的结果,拼接成option选项
            for (var i = 0; i < data.length; i++) {
                ops += '<option value="'+data[i]['id']+'">'+data[i].name+'</option>'
            }
            // 把拼接好的选项加入到下拉框中
            sel.html(ops)

        },'json')
    })
    // 收货人的正则验证
    $('#user-name').change(function(){
        var a = $(this).val()
        
        var titname = document.getElementById('name_msg');
        // 判断匹配结果是否正确
        if(a != ''){
            titname.innerHTML="正确";
            titname.style.color="green";
            $('#addressadd').prop("disabled", false);
        }else{
            titname.innerHTML="用户名不正确";
            titname.style.color="red";
            $('#addressadd').prop("disabled", true);
        }
    })

    // 手机号码验证
    $('#user-phone').change(function(){
        var a = $(this).val()
        var reg = /^1[3|5|7|8|9|4][0-9]{9}$/;
        var titphone = document.getElementById('phone_msg');
        // 判断匹配结果是否正确
        if(reg.test(a)){
            titphone.innerHTML="正确";
            titphone.style.color="green";
            $('#addressadd').prop("disabled", false);
        }else{
            titphone.innerHTML="手机号码不正确";
            titphone.style.color="red";
            $('#addressadd').prop("disabled", true);

        }
    })
</script>
{% endblock %}